Skip to main content

yImage

y-Image basic config normal y-Image basic config big

Description​

The yImage is aclickable element with different optical styles, used to indicate its different states. The yImage can be used to display image content and to trigger a user action. For example:

Basic Structure​

In the following the basic structure of the yImage shall be explained. For the general structure of a yComponent please visit the YBase-components basic-structure.

BasicStructure

The yImage as seen above contains a label.

Label​

The label contains the text inside the image. It is normally in the center of the component, but can be shifted horizontally or vertically. By changing the inner padding of the image, the label gets moved too.

Image​

The image can be used to show the image itself. Multiple style adjustments can be executed to customize the appearance.

Properties​

Through its various properties the yImage can be configured to suit your needs. The display below provides you with an overview of all the yImage properties.

Properties can be changed directly through three methods:

  • Inside the Toolbar, which is positioned in your workarea next to your component where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
  • It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for most used properties.
  • Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.
METAread more
Name: componentId
Not Editable
Number Property
--y-image__component-id

The identifier of the component that is unique within a page.

Name: componentType
Not Editable
String Property
--y-image__component-type

The type of the component. For this component it is -image.

Name: name
String Property
--y-image__name

The custom name of the component. It serves for better identification of the component.

Name: version
String Property
--y-image__version

The custom version of the Image-component. This can be used to ensure that all components work well together.

Name: coreTheme
String Property
--y-image__core-theme

The CoreTheme, which will be apllied to the Image. For further information on themes visit the themes page.

Name: subTheme
String Property
--y-image__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Image. For further information on themes visit the themes page.

Name: groupTheme
String Property
--y-image__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
Name: display
String Property
--y-image__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
Name: position
Not Editable
String Property
--y-image__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
Name: visible
String Property
--y-image__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
Name: minWidth
Injectable
UnitNumber Property
--y-image__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: minHeight
Injectable
UnitNumber Property
--y-image__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: width
Injectable
UnitNumber Property
--y-image__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: height
Injectable
UnitNumber Property
--y-image__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: maxWidth
Injectable
UnitNumber Property
--y-image__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: maxHeight
Injectable
UnitNumber Property
--y-image__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: flex
String Property
--y-image__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
Name: marginTop
Injectable
UnitNumber Property
--y-image__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight
Injectable
UnitNumber Property
--y-image__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom
Injectable
UnitNumber Property
--y-image__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft
Injectable
UnitNumber Property
--y-image__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop
Injectable
UnitNumber Property
--y-image__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight
Injectable
UnitNumber Property
--y-image__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom
Injectable
UnitNumber Property
--y-image__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft
Injectable
UnitNumber Property
--y-image__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage​

In this section you'll find a collection of application scenarios and examples that illustrate how to leverage the yImage in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations​

Image Elevated
Image Flat
Image Outlined
Image Rounded
Image Plain
genericsizeminWidth150px
genericsizeminHeight150px
stylebackgroundbgColor__normal#44ddbb
styleshadowboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)
styleborderborderRadius8px

Label​

The label can be used to show text inside the yImage. You can only have one label in a yImage. If you want to customize it, you can do this with the TypographyPicker in Toolbar or under the style menu in the Detail Panel.

Image Bottom Center
Image Bottom Right
genericsizeminWidth150px
genericsizeminHeight150px
stylelabellabel__fontFamily__normalRoboto
stylelabellabel__fontSize22px
stylelabellabel__fontWeight__normalbold
stylelabellabel__fontColor__normal#FFFFFF
stylelabellabel__labelPositionYflex-end
stylelabellabel__fontAligncenter

Image​

Image Rotation
Image Positioning
genericsizeminWidth150px
genericsizeminHeight150px
styleimageimage__urlhttps://images-na.ssl-images-amazon.com/images/I/61soMCzX+mL.jpg
styleimageimage__bgSizecover
styleimageimage__transform45deg
styleborderborderStyleTop__normalsolid
styleborderborderStyleRight__normalsolid
styleborderborderStyleBottom__normalsolid
styleborderborderStyleLeft__normalsolid
styleborderborderWidthTop__normal2px
styleborderborderWidthRight__normal2px
styleborderborderWidthBottom__normal2px
styleborderborderWidthLeft__normal2px
styleborderborderColorTop__normal#E4E6EA
styleborderborderColorRight__normal#E4E6EA
styleborderborderColorBottom__normal#E4E6EA
styleborderborderColorLeft__normal#E4E6EA

External database​

When working with external ressources, setting an image based on a external source may be relevant.

How to:

  1. Open the Detail Panel and proceed to the "Style" section to open "Image".
  2. Insert the external ressource database inside the "src-url" property.
  3. Add the reference to your image inside "url".
Warning: Lacking support

This feature is not supported yet!

How to:

  1. Create a yInput component in your application.
  2. Select the created yImage and open the Detail Panel to proceed to the "Links" section and open "Image".
  3. Create a new SourceLink -> select the yInput you just created and choose "input-string" as an event.

Now each time you insert a url into the input, the image will render the picture behind this url.

Redirect on click​

How to:

  1. Navigate to "Events" inside the Detail Panel and modify "EvtMouse" inside the group "Mouse".
  2. Associate a custom JavaScript function to the yImage. This function will be invoked every time the image is clicked.

Code example:

You can add the following JavaScript code snippet to your application to implement a function for navigating with the yImage.

With this script, a click on the yImage will redirect the user to another page of your application.

info

For this to work, you need to add routes for your pages inside the navigations.

EvtMouse
// function onImage_2_EvtMouse (apiObject, component, eventData) {

// for redirecting inside my application
apiObject.system.router.push("YOUR PAGE ROUTE HERE");

// for redirecting to an external page
window.location.replace("YOUR EXTERNAL ROUTE HERE");

// }